<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        *{
           padding:0px;
           margin: 0px; 
           box-sizing: border-box; 
        }

/* 
  display:flex 设置元素的为弹性布局，
    flex表示为块元素，子元素也为块元素
    inline-flex:表示为行元素，子元素为行元素
 对于一个display：flex/inline-flex的子元素，称为flex item  

 flex item的特点
   1. flex item的边距不会折叠。float和clear属性对于flex item没有任何作用
   2. flex item不管之前是否为块元素还是行元素，只要是flex item都会被块化。（只能设置宽度和高度）
   3. 尽量避免对flex item设置为position:absolute
   4. flex item的min-width默认设置为0

 

 */
        .container{
            /* 当前元素为弹性布局 */
            display: flex;
            width:602px;
            height:600px;
            border:1px solid black;
            margin:0px auto;
            /* 设置布局的方向 */
            /* flex-direction: row; */
            /* 设置容器是否为多行 */
            /* flex-wrap: wrap; */
            /* flex-flow:<flex-direction> <flex-wrap>  */
              flex-flow: row wrap;  
            /* justify-content :决定flex item的排列方式,对于row中的空白如何处理 */
             justify-content:flex-start;  
            /* 处理纵轴方向中的空白 */
             align-content: space-around;
        }

        .container .item{
            width: 150px;
            height: 150px;
            /* text-align: center;
            line-height: 150px; */
            /* 设置文本内容水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .container .item:nth-child(odd){
           background-color: pink;
        }

        .container .item:nth-child(even){
           background-color: rgb(179, 171, 173);
        }
    </style>
</head>
<body>
    <div class="container"> 
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</body>
</html>